<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <label>audio input:</label>
  <select id="audioInput"></select>
  <br>
  <label>audio output:</label>
  <select id="audioOutput"></select>
  <br>
  <label>video input:</label>
  <select id="videoInput"></select>
  <br>
  <video autoplay playsinline id="player"></video>
</div>
<script src="../static/adapter.js"></script>
<script src="../utils/utils.js"></script>
<script>
  'use strict'

  var $videoPlay = $('video#player');

  /**
   * 获取到流， 直接赋值给 video
   *
   * @param stream
   * @returns {Promise<MediaDeviceInfo[]>}
   */
  function gotMediaStream (stream) {
    $videoPlay.srcObject = stream;

    // 返回设备信息列表
    // navigator.mediaDevices.enumerateDevices().then(console.log)
    return navigator.mediaDevices.enumerateDevices()
  }

  /**
   * 设备信息
   * @param deviceInfos
   */
  function gotDevices (deviceInfos) {
    var $audioInput = $('#audioInput');
    var $audioOutput = $('#audioOutput');
    var $videoInput = $('#videoInput');


    deviceInfos.forEach(item => {
      var option = document.createElement('option');
      console.log(item.kind);
      option.text = item.label;
      option.value = item.deviceId;
      if (item.kind === 'audioinput') {
        $audioInput.appendChild(option)
      } else if (item.kind === 'audiooutput') {
        $audioOutput.appendChild(option)
      } else if (item.kind === 'videoinput') {
        $videoInput.appendChild(option)
      }
    })
  }

  const getUserMedia = testUserMedia();
  if (getUserMedia) {
    var constraints = {
      // 是否使用视频
      video: true,
      // 是否使用音频
      audio: true,
    };
    getUserMedia(constraints)
      .then(gotMediaStream)
      .then(gotDevices)
      .catch(handleError)
  }
</script>
</body>
</html>
